<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户ID">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.uuid"
                        placeholder="请输入用户ID"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="用户昵称/姓名/手机号">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.user_keyword"
                        placeholder="请输入用户昵称/姓名/手机号"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="团长ID搜索">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.community_user_id"
                        placeholder="请输入团长ID搜索"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="用户等级">
                    <el-select class="w-[280px]" v-model="queryParams.rank_id" clearable>
                        <template v-for="item in gradeList">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="消费等级">
                    <el-select class="w-[280px]" v-model="queryParams.level_id" clearable>
                        <template v-for="item in expenditureList">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-tabs class="demo-tabs" v-model="type" @tab-click="handleTabclick">
<!--                <template v-for="">-->
<!--                <el-tab-pane name="0" >-->
<!--                    <template #label>-->
<!--                        <span>全部用户</span>-->
<!--                        <span style="color: #FF5722">（{{pager.extend?.all_num || '0'}}）</span>-->
<!--                    </template>-->
<!--                </el-tab-pane>-->
<!--                </template>-->
				<div class="flex justify-end mb-[9px]" >
					<el-button
					    @click="laheiAll"  type="primary"
					    class="w-[84px] h-[30px] mb-[9px] text-[12px] ml-2"
					    :disabled="ids.length > 0 ? false : true"
					    >一键拉黑</el-button
					>
				</div>

                <el-table size="large" v-loading="pager.loading" @selection-change="handleSelectionChange" :data="pager.lists" style="width: 100%">
					<el-table-column type="selection" width="60" />
                    <el-table-column label="用户类型" prop="nickname" min-width="100">
                        <template #default="{ row }">
                            <el-tag class="ml-2" :type="row.rank_name == '团长' ? 'success' : 'info'">{{row.rank_name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="团长信息" prop="nickname" min-width="300">
                        <template #default="{ row }">
                            <div class="flex flex-row items-center gap-2">
                                <div>
                                    <el-avatar :src="row?.headimg" style="height: 60px; min-width: 60px"/>
                                </div>
                                <div>
                                    <div v-for="(item, index) in userInfo1" :key="index">
                                        <span>{{item.title}}：</span>
                                        <span style="color: #2494f2">{{row[item.key]}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="代理信息" prop="nickname" min-width="300">
                        <template #default="{ row }">
                            <div class="flex flex-row items-center gap-2">
                                <div>
                                    <el-avatar :src="row.from?.headimg" style="height: 60px; min-width: 60px"/>
                                </div>
                                <div>
                                    <div v-for="(item, index) in userInfo2" :key="index">
                                        <span>{{item.title}}：</span>
                                        <span style="color: #2494f2">{{row?.from?.[item.key]}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="余额统计" prop="account" min-width="200">
                        <template #default="{ row }">
                            <div class="flex flex-row items-center gap-2">
                                <div>
                                    <div v-for="(item, index) in statisticsInfo" :key="index" @click="toggleMoney(row.id, item)">
                                        <span>{{item.title}}：</span>
                                        <span style="color: #2494f2; cursor: pointer">{{row[item.key]}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户信息" prop="account" min-width="200">
                        <template #default="{ row }">
                            <div class="flex flex-row items-center gap-2">
                                <div>
                                    <div v-for="(item, index) in userState" :key="index">
                                        <span>{{item.title}}：</span>
                                        <span style="color: #009900" v-if="item.key == 'status'">{{['已禁用', '已激活'][row[item.key]]}}</span>
                                        <span style="color: #2494f2" v-else="item.key == 'status'">{{row[item.key]}}</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作面板" min-width="160" fixed="right">
                        <template #default="{ row }">
                           <!-- <el-button
                                v-if="row.rank_name == '团长'"
                                type="warning"
                                link
                                @click="toggleClick2(row.id, 2)"
                            >
                                切换代理
                            </el-button>
                            <el-button
                                v-else
                                type="warning"
                                link
                                @click="toggleClick1(row.id, 1)"
                            >
                                切换团长
                            </el-button> -->

<!--                            <el-button-->
<!--                                v-if="row.from !== '{}'"-->
<!--                                type="warning"-->
<!--                                link-->
<!--                                @click="toggleClick1(row.id, 3)"-->
<!--                            >-->
<!--                                迁移团长-->
<!--                            </el-button>-->
<!--                            <el-button type="primary" link>-->
<!--                                <router-link-->
<!--                                        :to="{-->
<!--                                        path: getRoutePath('live.live/edit'),-->
<!--                                        query: {-->
<!--                                            id: row.id-->
<!--                                        }-->
<!--                                    }"-->
<!--                                >-->
<!--                                    查看所属订单-->
<!--                                </router-link>-->
<!--                            </el-button>-->
                            <el-button type="primary"  @click="editClick(row)">
                                编辑
                            </el-button>
                            <el-button type="danger"  @click="userDelete(row.id)">
                                删除
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex justify-end mt-4">
                    <pagination v-model="pager" @change="getLists" />
                </div>
            </el-tabs>
        </el-card>
<!--        <CutPop v-if="showCutPop" ref="editRef" @close="closePop"></CutPop>-->
        <MoneyPop v-if="showMoneyPop" ref="showMoneyRef" @close="closeMoneyPop"></MoneyPop>
    </div>
</template>
<script lang="ts" setup>
import { getUserList, delUser, batchUserStatus0} from '@/api/consumer'
import { usePaging } from '@/hooks/usePaging'
import CutPop from "./component/CutPop.vue";
import MoneyPop from "./component/MoneyPop.vue";
import cache from '@/utils/cache'
import { userInfo1, userInfo2, statisticsInfo, userState  } from "./data.js";
import router, { getRoutePath } from '@/router'
import feedback from "@/utils/feedback";
import {levelAllList, UserRankList} from "@/api/user";

const queryParams = reactive({
    uuid: '',
    user_keyword: '',
    rank_id: '',
    level_id: '',
    community_user_id: ''
});

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getUserList,
    params: queryParams
});

getLists();


// 获取用户级别
const gradeList = ref([]);
const { getLists: getGradeList } = usePaging({
    fetchFun: UserRankList
});
getGradeList().then((res) => {
    gradeList.value = res.list.map((_res: any) => {
        return {id: _res.id, name: _res.name}
    })
});

// 获取消费级别
const expenditureList = ref([]);
const { getLists: getExpenditureList } = usePaging({
    fetchFun: levelAllList
});
getExpenditureList().then((res) => {
    expenditureList.value = res.list.map((_res: any) => {
        return {id: _res.id, name: _res.name}
    })
})

const ids = ref<any[]>([]);

const handleSelectionChange = (val: any[]) => {
    ids.value = val.map((item) => item.id);
};

const laheiAll = async () => {
    await feedback.confirm('确定要一键拉黑？')
    await batchUserStatus0({id_arr: JSON.stringify(ids.value)})
    getLists()
}

//切换导航栏
const handleTabclick = async () => {
    // await nextTick();
    // getLists()
};

// 删除用户
const userDelete = async (id: number) => {
    await feedback.confirm('确定删除该用户？');
    delUser({uuid: id})
    getLists()
};



// 编辑
const editClick = async (data: object) => {
    await cache.set('userInfo', data);
    router.push({
        // path: getRoutePath('user.user/detail'),
        path: '/consumer/lists/detail',
        // query: {
        //     mode: PageMode['ADD']
        // }
    })
};

let showCutPop = ref(false);
// 切换弹窗取消
const closePop = async (type: number) => {
    type ? getLists() : null;
    showCutPop.value = false;
};





// 金额统计详情切换弹窗打开
let showMoneyPop = ref(false);
const showMoneyRef = shallowRef<InstanceType<typeof CutPop>>();
const toggleMoney = async (id: string, item: any) => {
    console.log(id)
    console.log(item)
    showMoneyPop.value = true;
    await nextTick();
    showMoneyRef.value?.open();
    showMoneyRef.value?.setFormData(id, item.title);
};

// 金额统计详情切换弹窗取消
const closeMoneyPop = async (type: number) => {
    showMoneyPop.value = false;
};

</script>
